<template>
  <div>
    <div class="car-area">
      <div class="title">
        <div class="point"></div>
        <span>放款材料</span>
        <el-button @click="down(3)"
                   style="margin-left:50px;"
                   type="primary"
                   size="small">资料下载</el-button>
      </div>
      <div class="customer-area">
        <div class="second-title">
          <div class="point"></div>
          <span>主贷人</span>
        </div>
        <el-row :gutter="10">
          <el-col :span="2">
            <div class="content-title">
              <span>客户名</span>
            </div>
          </el-col>
          <el-col :span="10">
            <span>{{ orderInfo.customerName }}</span>
          </el-col>
          <el-col :span="2">
            <div class="content-title">
              <span>手机号</span>
            </div>
          </el-col>
          <el-col :span="10">
            <span>{{ orderInfo.customerPhone }}</span>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="2">
            <div class="content-title">
              <span>产品方名称</span>
            </div>
          </el-col>
          <el-col :span="10">
            <span>{{ orderInfo.orderProductName }}</span>
          </el-col>
          <el-col :span="2">
            <div class="content-title">
              <span>产品方订单号</span>
            </div>
          </el-col>
          <el-col :span="10">
            <span>{{ orderInfo.productOrderId }}</span>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="2">
            <div class="content-title">
              <span>金融产品公司</span>
            </div>
          </el-col>
          <el-col :span="10">
            <span>{{ orderInfo.productCompanyName }}</span>
          </el-col>
          <el-col :span="2">
            <div class="content-title">
              <span>方案名称</span>
            </div>
          </el-col>
          <el-col :span="10">
            <span>{{ orderInfo.productName }}</span>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="2">
            <div class="content-title">
              <span>实际放款额</span>
            </div>
          </el-col>
          <el-col :span="10">
            <span>{{ orderInfo.discharge }}</span>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="2">
            <div class="content-title">
              <span>订单详情</span>
            </div>
          </el-col>
          <el-col :span="19">
            <div>
              <pic-view :pic-url-list.sync="orderInfo.productOrder.urls"
                        upload-class="lang-upload"
                        :pic-name-list.sync="orderInfo.productOrder.names"
                        :upload-data="{ picName: 'customer\\' + orderInfo.customerId }"
                        :upload-type="isInfo"
                        @showImg="showFastImg"></pic-view>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="2">
            <div class="content-title">
              <span>收款确认函</span>
            </div>
          </el-col>
          <el-col :span="19">
            <div>
              <pic-view :pic-url-list.sync="orderInfo.receivables.urls"
                        upload-class="lang-upload"
                        :pic-name-list.sync="orderInfo.receivables.names"
                        :upload-data="{ picName: 'customer\\' + orderInfo.customerId }"
                        :upload-type="isInfo"
                        @showImg="showFastImg"></pic-view>
            </div>
          </el-col>
        </el-row>
      </div>
      <order-account :order-info.sync="orderInfo"
                     @show="showFastImg"></order-account>
    </div>
  </div>
</template>

<style lang="scss">
</style>

<script>
import '@/style/common.scss'
import '@/style/info.scss'
import picView from '@/components/pic-viewer-up'
import orderAccount from '@/components/order-base/account'
import { api } from '@/api'
import { quillEditor } from 'vue-quill-editor'
import { devBaseURL } from '@/utils/http'
import { HTTPSUCCESS, HTTPDATAFAIL, HTTPPARAMFAIL, HTTPUNKOWNFAIL } from '@/components/constant'
import { getToken } from '@/utils/auth'

export default {
  data() {
    return {
    }
  },
  watch: {
    orderInfo: {
      handler: function() {
        this.$emit('update:orderInfo', this.orderInfo)
      }
    }
  },
  props: {
    orderInfo: {
      type: Object,
      default: () => { return {} }
    },
    isInfo: {
      type: Boolean,
      default: false
    }
  },
  components: { picView, orderAccount },
  created() {
  },
  methods: {
    down(step) {
      self.location.href = devBaseURL + api.SYS_ORDER_DOWNLOADZIP + '/' + this.orderInfo.orderId + '/fast/' + step
    },
    showFastImg(url) {
      this.$emit('show', url)
    }
  }
}
</script>
